<template>
  <el-container class="container" v-loading="loading" element-loading-text="请稍后">
      <el-form :model="loginForm" status-icon :rules="loginRule" ref="loginForm" class="login-form" :label-position="top" >
        <div class="logo-item">
          <img src="../../assets/logo_dark.png" class="logo-image">
          <span class="form-tips">后台登录</span>
        </div>
        <el-form-item label="用户名" prop="username" class="form-item">
          <el-input type="text" v-model="loginForm.username" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" class="form-item">
          <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="resetForm('loginForm')" class="register-btn" icon="el-icon-check">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" class="login-submit-btn" icon="el-icon-arrow-left">登录</el-button>
        </el-form-item>
      </el-form>
  </el-container>
</template>

<script>
export default {
  name: 'AdministratorLogin',
  data () {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入密码'))
      }
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false,
      loginRule: {
        username: [
          { validator: checkUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      this.loading = true
      this.$administratorAPI.user_login(this.loginForm).then((params) => {
        this.loading = false
        this.$store.state.currentUser = {
          username: params.data['username'],
          image: params.data['image']
        }
        this.$router.push('/administrator')
      }).catch((params) => {
        this.loading = false
        this.$alert(params.message)
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
  .slide-fade-enter-active {
    transition: all .15s ease;
  }
  .slide-fade-leave-active {
    transition: all .15s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(100px);
    opacity: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../../assets/images/customer/login_bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .login-form {
    width: 370px;
    padding: 50px 80px;
    border-radius: 10px;
    background-color: white;
  }
  .el-form-item {
    margin-bottom: 14px !important;
  }
  .login-submit-btn, .register-btn {
    width: 100%;
  }
  .register-btn {
    margin-top: 14px;
  }
  .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
  }
  .logo-image {
    width: 240px;
  }
  .form-tips {
    font-size: 17px;
    margin-left: 15px;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.36);
  }
  a {
    text-decoration: none;
    color: #a2a2a2;
  }
  .form-footer {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }
</style>
